<!DOCTYPE HTML>
<html>
<body bgColor="#758561">
					    
<center><canvas id="corners" tabindex="0" width="360" height="640">
	This game requires canvas support.  Load it in Chrome!
</canvas></center>

<script type="text/javascript">

(function(canvas, inputsrc) {

var context   = canvas.getContext('2d');

var SCREEN_SIZE_X = 360;
var SCREEN_SIZE_Y = 640;

var GRID_NUM_UNITS_X = 4;
var GRID_NUM_UNITS_Y = 4;

var GRID_X_OFFSET = 20;
var GRID_Y_OFFSET = 140;

var GRID_UNIT_SIZE_X = ( SCREEN_SIZE_X - ( GRID_X_OFFSET * 2 ) ) / GRID_NUM_UNITS_X;
var GRID_UNIT_SIZE_Y = GRID_UNIT_SIZE_X;

var GRID_UNIT_BORDER_WIDTH = 8;

var board = [
	[ { black:  true, piece: true },	{ black:  true, piece: true },	{ black:  true, piece: true }, 	{ black:  true, piece: true } ],
	[ { black:  true, piece: true },	{ black:  true, piece: true },	{ black:  true, piece: true }, 	{ black:  true, piece: true } ],
	[ { black:  false, piece: true },	{ black:  false, piece: true },	{ black:  false, piece: true }, { black:  false, piece: true } ],
	[ { black:  false, piece: true },	{ black:  false, piece: true },	{ black:  false, piece: true }, { black:  false, piece: true } ] ];
	
var selectedGridUnitArray = new Array(); 

function gridUnitArrayFind( gridUnitArray, gridUnit )
{
	for( var gridUnitIdx = 0; gridUnitIdx != gridUnitArray.length; ++gridUnitIdx )
	{
		if(	( gridUnitArray[ gridUnitIdx ].x == gridUnit.x ) &&
			( gridUnitArray[ gridUnitIdx ].y == gridUnit.y ) )
		{
			return gridUnitIdx;			
		}
	}
	return -1;
}
				

function findPos(obj) {
	var curleft = 0, curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
		return { x: curleft, y: curtop };
	}
	return undefined;
}

function findGridUnit( pos )
{
	var gridUnitX = Math.floor( ( pos.x - GRID_X_OFFSET ) / GRID_UNIT_SIZE_X );
	var gridUnitY = Math.floor( ( pos.y - GRID_Y_OFFSET ) / GRID_UNIT_SIZE_Y );
	return { x: gridUnitX, y: gridUnitY };
}

function gridUnitValid( gridUnit )
{
	return ( ( gridUnit.x >= 0 ) && ( gridUnit.x < GRID_NUM_UNITS_X ) && ( gridUnit.y >= 0 ) && ( gridUnit.y < GRID_NUM_UNITS_Y ) );
}

var clickPosArray = new Array();
inputsrc.addEventListener('click', function(e) {
	aMouseClick = true;

	var pos = findPos(canvas);
	var clickPosX = e.pageX - pos.x;
	var clickPosY = e.pageY - pos.y;
	var clickPos = { x: clickPosX, y: clickPosY };

	clickPosArray.push( clickPos );
	
}, false);


function draw()
{
	for( var gx = 0; gx != GRID_NUM_UNITS_X; ++gx )
	{
		for( var gy = 0; gy != GRID_NUM_UNITS_Y; ++gy )
		{
			var gridUnit = { x: gx, y: gy };
			var square = board[ gy ][ gx ];			
			
			// Draw something to show it's selected
			if( gridUnitArrayFind( selectedGridUnitArray, gridUnit ) != -1 )
			{
				context.fillStyle="#0034CC";
				context.fillRect(
					GRID_X_OFFSET + ( gx * GRID_UNIT_SIZE_X ),
					GRID_Y_OFFSET + ( gy * GRID_UNIT_SIZE_Y ),
					GRID_UNIT_SIZE_X,
					GRID_UNIT_SIZE_Y );
			}

			if( square.black )
			{
				context.fillStyle="#0034CC";
			}
			else
			{
				context.fillStyle="#FF3300";
			}
			
			context.fillRect(
				GRID_X_OFFSET + ( gx * GRID_UNIT_SIZE_X ) + GRID_UNIT_BORDER_WIDTH,
				GRID_Y_OFFSET + ( gy * GRID_UNIT_SIZE_Y ) + GRID_UNIT_BORDER_WIDTH,
				GRID_UNIT_SIZE_X - ( GRID_UNIT_BORDER_WIDTH * 2 ),
				GRID_UNIT_SIZE_Y - ( GRID_UNIT_BORDER_WIDTH * 2 ) );
		}
	}
		
	//for( var i in clickPosArray )
	//{
	//	var clickPos = clickPosArray[ i ];
	//	context.fillStyle="#FF0000";
	//	context.fillRect( clickPos.x, clickPos.y, 10, 10 );
	//}
}

setInterval((function() {

	return function() {
		
		while( clickPosArray.length != 0 )
		{
			var clickPos = clickPosArray[ clickPosArray.length - 1 ];
			
			var gridUnit = findGridUnit( clickPos );
			if( gridUnitValid( gridUnit ) )
			{
				//var selectedIdx = -1;
				//var selectedGridUnitIdx = 0;
				//while( ( selectedGridUnitIdx != selectedGridUnitArray.length ) && ( selectedIdx == -1 ) )
				//{
				//	if(	( selectedGridUnitArray[ selectedGridUnitIdx ].x == gridUnit.x ) &&
				//			( selectedGridUnitArray[ selectedGridUnitIdx ].y == gridUnit.y ) )
				//	{
				//		selectedIdx = selectedGridUnitIdx;					
				//	}
				//	else
				//	{
				//		++selectedGridUnitIdx;
				//	}
				//}
				
				var selectedIdx = gridUnitArrayFind( selectedGridUnitArray, gridUnit );
				//var selectedIdx = selectedGridUnitArray.indexOf( gridUnit );
				if( selectedIdx != -1 )
				{
					selectedGridUnitArray.splice( selectedIdx, 1 );
				}
				else
				{
					selectedGridUnitArray.push( gridUnit );
				}							
			}

			clickPosArray.pop();
		}
		
		
		
		
		
		draw();
		
	}
})(), 17 ); })(document.getElementById('corners'), document/*.getElementById('corners')*/);

</script>

</body>
</html>
